<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calm Tasks - Social Anxiety To-Do App Prototype</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
        }

        .phone-frame {
            width: 393px;
            height: 852px;
            background: linear-gradient(145deg, #1a1a1a, #000);
            border-radius: 55px;
            padding: 8px;
            box-shadow:
                0 35px 80px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .phone-frame::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 134px;
            height: 6px;
            background: #333;
            border-radius: 3px;
        }

        .phone-screen {
            width: 100%;
            height: 100%;
            border-radius: 47px;
            overflow: hidden;
            background: #fff;
            position: relative;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .prototype-title {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>

<body class="p-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-12">
            <h1 class="text-5xl font-bold prototype-title mb-4">Calm Tasks</h1>
            <p class="text-xl text-gray-700 mb-2">Social Anxiety To-Do List App</p>
            <p class="text-gray-600">Neumorphism Design • High-Fidelity Prototype Gallery</p>
            <div class="mt-6 inline-flex items-center space-x-4 bg-white/50 backdrop-blur-sm rounded-full px-6 py-3">
                <i class="fas fa-mobile-alt text-gray-600"></i>
                <span class="text-sm text-gray-700">iPhone 15 Pro Dimensions (393×852)</span>
            </div>
        </div>

        <!-- Prototype Gallery -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-32 justify-items-center max-w-6xl mx-auto">
            <!-- Home Dashboard -->
            <div class="text-center">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Home Dashboard</h3>
                    <p class="text-sm text-gray-600">Main interface with today's tasks</p>
                </div>
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe src="home.html" loading="lazy"></iframe>
                    </div>
                </div>
            </div>

            <!-- Task Management -->
            <div class="text-center">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Task Management</h3>
                    <p class="text-sm text-gray-600">Organize tasks by anxiety level</p>
                </div>
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe src="tasks.html" loading="lazy"></iframe>
                    </div>
                </div>
            </div>

            <!-- Mood Tracking -->
            <div class="text-center">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Mood Tracking</h3>
                    <p class="text-sm text-gray-600">Daily mood and anxiety logging</p>
                </div>
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe src="mood.html" loading="lazy"></iframe>
                    </div>
                </div>
            </div>

            <!-- Add Task -->
            <div class="text-center">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Add Task</h3>
                    <p class="text-sm text-gray-600">Create new tasks with anxiety support</p>
                </div>
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe src="add-task.html" loading="lazy"></iframe>
                    </div>
                </div>
            </div>

            <!-- Progress View -->
            <div class="text-center">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Progress View</h3>
                    <p class="text-sm text-gray-600">Achievements and statistics</p>
                </div>
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe src="progress.html" loading="lazy"></iframe>
                    </div>
                </div>
            </div>

            <!-- Settings -->
            <div class="text-center">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 mb-1">Settings</h3>
                    <p class="text-sm text-gray-600">App preferences and support</p>
                </div>
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe src="settings.html" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <!-- Features Overview -->
        <div class="mt-16 bg-white/30 backdrop-blur-sm rounded-3xl p-8">
            <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">Key Features for Social Anxiety Support</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="text-center">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-wind text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">Breathing Exercises</h3>
                    <p class="text-sm text-gray-600">Integrated calming techniques</p>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-thermometer-half text-yellow-600 text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">Anxiety Levels</h3>
                    <p class="text-sm text-gray-600">Task difficulty indicators</p>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-heart text-green-600 text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">Gentle Progress</h3>
                    <p class="text-sm text-gray-600">Non-pressuring achievements</p>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-shield-alt text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-gray-800 mb-2">Safe Space</h3>
                    <p class="text-sm text-gray-600">Private, judgment-free zone</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>